<template>
	<view class="jingzhunExample">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :bar-width="200"
			active-color="#002A55"></u-tabs>
		<!-- 车辆估值 -->
		<view style="padding: 0 32rpx;">
			<view v-if="current===0">
				<view class="bagColorWhite carValuation">
					<view style="font-size:34rpx;margin-bottom: 10rpx;">
						极狐 阿尔法T(ARCFOX aT)
					</view>
					<view class="">
						2021款 480S
					</view>
					<view class="carValuationZhuang">
						<view class="" v-for="item in zhuangkuangList">
							<text>{{item.name}}:</text>
							<text class="youText" :style="{'background-color': item.color}">{{item.dis}}</text>
						</view>
					</view>
					<view class="infomationContent">
						<view class="contentPart" v-for="item in listDe">
							<view style="margin: 20rpx 0;font-size: 32rpx;">{{item.value}}</view>
							<view class="information">{{item.information}}</view>
						</view>
					</view>
					<!-- <view style="margin-top: 34rpx;color:#999;text-align: center;">
						原厂加装配置总金额：2.88万元
					</view> -->
				</view>
				<view class="bagColorWhite jingzhunData">
					<view class="title">
						精准定价数据
					</view>
					<view class="_flex _justify_between" style="text-align: center;margin-bottom: 30rpx;">
						<view  style="width: 50%;border-right: 1px solid #eee;">
							<view style="font-size: 22rpx;">
								建议卖车价
							</view>
							<view style="font-size: 40rpx;margin: 20rpx 0;color: #F44336;">
								18.34万
							</view>
							<view style="color: #999;">
								17.79-19.17万
							</view>
						</view>
						<view  style="width: 50%">
							<view style="font-size: 22rpx;">
								建议买车价
							</view>
							<view style="font-size: 40rpx;margin: 20rpx 0;color: #F44336;">
								21.18万
							</view>
							<view style="color: #999;">
								20.28-22.24万
							</view>
						</view>
						<!-- <u-table border-color="#fff">
							<u-tr class="u-tr" v-for="item in tableList">
								<u-td class="u-td">{{item.name}}</u-td>
								<u-td class="u-td">{{item.price}}</u-td>
							</u-tr>
						</u-table> -->
					</view>
					<view class="ciTitle _flex _justify_between">
						<view>新车指导价：<text style="color: #F44336;">24.19</text>万</view>
						<view>本地新车价(含税)：<text style="color: #F44336;">25.74</text>万</view>
					</view>
				</view>
				<view class="bagColorWhite sellingCarsPrice">
					<view class="sellingCarsPriceTitle">
						<text class="title">卖车价格分析</text>
						<text>单位：万元</text>
					</view>
					<view style="text-align: center;border-bottom: 1px solid #eee;">
						<u-tabs :list="maicheList" :is-scroll="false" :current="active" @change="(data)=>{active=data}" :bar-width="200"
							active-color="#f44336"></u-tabs>
						<!-- <text @click="active=0" :class="active==0?'active':''">未来价格走势</text>
						<text style="margin: 0 5rpx;">|</text>
						<text @click="active=1" :class="active==1?'active':''">历史价格走势</text> -->
					</view>
					<view style="text-align: center;">
						<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/zhe.jpg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="bagColorWhite sellingCarsPrice">
					<view class="sellingCarsPriceTitle">
						<text class="title">买车价格分析</text>
						<text>单位：万元</text>
					</view>
					<view style="text-align: center;border-bottom: 1px solid #eee;">
						<u-tabs :list="maicheList" :is-scroll="false" :current="active1" @change="(data)=>{active1=data}" :bar-width="200"
							active-color="#002A55"></u-tabs>
						<!-- <text @click="active=0" :class="active==0?'active':''">未来价格走势</text>
						<text style="margin: 0 5rpx;">|</text>
						<text @click="active=1" :class="active==1?'active':''">历史价格走势</text> -->
					</view>
					<view style="text-align: center;">
						<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/zhe.jpg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="bagColorWhite sellingCarsPrice">
					<view class="sellingCarsPriceTitle">
						<text class="title">同车系近期市场库存</text>
						<text>单位：辆</text>
					</view>
					<view style="text-align: center;">
						<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/zhu.jpg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="bagColorWhite sellingCarsPrice">
					<view class="title">
						零售价格成交记录
					</view>
					<view class="">
						<view class="_flex _justify_between retailPriceStyle" v-for="itemCheng in retailPriceList">
							<view>
								<view style="margin-bottom: 10rpx;">
									{{itemCheng.title}}
								</view>
								<view style="color: #999;">
									<text>{{itemCheng.addresss}}</text>
									<text style="margin: 0rpx 30rpx;">{{itemCheng.date}}</text>
									<text>{{itemCheng.licheng}}</text>
								</view>
							</view>
							<view style="text-align: right;">
								<view style="margin-bottom: 10rpx;color: red;">
									{{itemCheng.price}}
								</view>
								<view style="color: #999;">
									{{itemCheng.transactionDate}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bagColorWhite sellingCarsPrice">
					<view class="title">
						车辆残值分析
					</view>
					<view class="table" style="padding-top: 0;">
						<u-table class="u-table" border-color="#fff">
							<u-tr class="u-tr" v-for="item in carSalesPriceList">
								<u-td width="40%" class="u-td nameTd">{{item.name}}</u-td>
								<u-td class="u-td deId">{{item.describe}}</u-td>
							</u-tr>
						</u-table>
					</view>
				</view>
				<view class="bagColorWhite sellingCarsPrice">
					<view class="title">
						车辆状况一览
					</view>
					<view class="table" style="padding-top: 0;">
						<u-table class="u-table" border-color="#fff">
							<u-tr class="u-tr" v-for="item in carConditionList">
								<u-td width="40%" class="u-td nameTd">{{item.name}}</u-td>
								<u-td class="u-td deId">{{item.describe}}</u-td>
							</u-tr>
						</u-table>
					</view>
				</view>
				<view class="bagColorWhite sellingCarsPrice">
					<view class="sellingCarsPriceTitle">
						<text class="title">邻近省份价格</text>
						<text>单位：万元</text>
					</view>
					<view style="text-align: center;">
						<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/zhu.jpg" mode="aspectFit"></image>
					</view>
					<view style="text-align: center;padding-bottom: 30rpx;">
						查看各省价格柱状图<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="carSetting" v-if="current===1">

			</view>
		</view>
	</view>
</template>

<script>
	import {
		URL,
		BASEURL
	} from "../../config.js"
	export default {
		data() {
			return {
				active: 0,
				active1:0,
				current: 0,
				maicheList:[
					{
						name: '未来价格走势'
					},
					{
						name: '历史价格走势'
					},
				],
				list: [{
						name: '车辆估值'
					},
					{
						name: '车辆配置'
					},
				],
				zhuangkuangList: [{
						name: '工况状况',
						dis: '优',
						color:'#1CE46B'
					},
					{
						name: '内饰状况',
						dis: '优',
						color:'#1CE46B'
					},
					{
						name: '外观状况',
						dis: '良',
						color:'#F64F46'
					}
				],
				listDe: [{
						information: '所在城市',
						value: '北京'
					},
					{
						information: '上牌日期',
						value: '2021-04'
					},
					{
						information: '行驶里程',
						value: '4.5万公里'
					},
					{
						information: '排放标准',
						value: '纯电'
					},
					{
						information: '车身颜色',
						value: '白色'
					},
					{
						information: '过户次数',
						value: '0次'
					}, {
						information: '使用性质',
						value: '非运营'
					},
					{
						information: '出厂年月',
						value: '2020-02'
					},
				],
				tableList: [{
						name: '建议卖车价',
						price: '21.37万元'
					},
					{
						name: '建议买车价',
						price: '27.68万元'
					},
					{
						name: '车商收购价',
						price: '20.73-23.14万元'
					},
					{
						name: '车商售车价',
						price: '25.66-29.06万元'
					}
				],
				retailPriceList: [{
						title: '极狐 阿尔法T 480s',
						addresss: '北京',
						date: '2021-01上牌',
						licheng: '1万公里',
						price: '19.95万',
						transactionDate: '成交于2021.02.02'
					},
					{
							title: '极狐 阿尔法T 480s',
							addresss: '北京',
							date: '2021-01上牌',
							licheng: '0.5万公里',
							price: '22.15万',
							transactionDate: '成交于2021.07.12'
						},
				],
				carSalesPriceList: [{
						name: '新车价',
						describe: '新车指导价和底价直接影响二手车价格'
					},
					{
						name: '车龄',
						describe: '5个月，车辆处于最大折价期内'
					},
					{
						name: '里程数',
						describe: '0.5万公里，根据现有车龄，该车的里程数较高，对车价有一定影响'
					},
					{
						name: '过户次数',
						describe: '车辆无过户，对残值无影响'
					},
					{
						name: '车身颜色',
						describe: '白色'
					},
					{
						name: '是否热门车型',
						describe: '不属于'
					},
					{
						name: '营运出租车',
						describe: '营运出租车1次'
					}
				],
				carConditionList: [{
						name: '外观状况',
						describe: '优，原厂漆，漆面轻微瑕疵'
					},
					{
						name: '内饰成色',
						describe: '优，方向盘及按键无磨损，座椅崭新'
					},
					{
						name: '工况',
						describe: '优，发动机运作良好无维修'
					}
				]
			};
		},
		methods: {
			change(index) {
				this.current = index
			}
		}
	};
</script>
<style scoped lang="scss">
	.bagColorWhite {
		background-color: #fff;
		border-radius: 12rpx;
	}

	.infomationContent {
		display: flex;
		flex-wrap: wrap;

		.contentPart {
			flex-grow: 1;
			text-align: center;
			width: 24%;

			.information {
				color: #999;
				margin-bottom: 10rpx;
				font-size: 22rpx;
			}
		}

		.contentPart:last-child {
			border-right: none
		}
	}

	.carValuation {
		margin: 20rpx 0;
		padding: 30rpx 26rpx;

		.carValuationZhuang {
			color: #999;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			.youText {
				color: #fff;
				padding: 0 6rpx;
				margin-left: 10rpx;
			}
		}
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #002A55;
		// text-align: center;
		padding: 30rpx 20rpx;
	}

	.jingzhunData {
		margin-bottom: 20rpx;
		.ciTitle {
			color: #999;
			padding: 20rpx 20rpx;
			border-top: 1px solid #eee;
		}
	}

	.table {
		padding: 40rpx 28rpx;
		u-table {
			u-tr:nth-child(2n+1) {
				.u-td {
					background-color: #EEEFF3;
				}
			}

			u-tr:nth-child(2n) {
				.u-td {
					background-color: #F4F8F9;
				}
			}
		}
	}

	.sellingCarsPrice {
		// text-align: center;
		margin: 20rpx 0;

		.sellingCarsPriceTitle {
			padding: 40rpx 20rpx 40rpx 0;

			text:last-child {
				color: #999;
				float: right;
			}
		}
	}

	.active {
		color: #d0b52a;
	}

	.retailPriceStyle {
		padding: 30rpx 20rpx;
	}
</style>
<!-- <style lang="scss">
	.nameTd{
		.u-td{
			width: 60%;
		}
	}
	.deTd{
		.u-td{
			width: 140%;
		}
	}
</style> -->
